<template>
  <!-- 添加或修改菜单对话框 -->
  <el-dialog v-model="visible" v-if="visible" title="选择设备" width="90%" style="margin-top: 5vh">
    <avue-crud
      ref="crud"
      v-model="form"
      :page="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      @on-load="getList"
      @search-change="searchChange"
      @refresh-change="refreshChange"
      @size-change="sizeChange"
      @current-change="currentChange"
      @selection-change="selectionChange"
    >
      <template #radio="{ row }">
        <el-radio v-model="selectRow" :label="row.$index"></el-radio>
      </template>
      <template #modelType2-search>
        <avue-input-tree
          filterable
          v-model="form.modelType2"
          :dic="treeLocationData2"
          :props="defaultProps3"
          type="tree"
          placeholder="请选择系统名称"
        ></avue-input-tree>
      </template>
      <template #deviceType-search>
        <avue-select
          v-model="form.deviceType"
          :dic="deviceTypeData"
          :props="defaultProps4"
          placeholder="请选择资产类型"
        ></avue-select>
      </template>
      <template #devType2-search>
        <avue-select
          v-model="form.devType2"
          :dic="devTypeData"
          :props="defaultProps5"
          placeholder="请选择资产型号"
        ></avue-select>
      </template>
      <template #deviceName-search>
        <el-input v-model="form.deviceName" placeholder="请输入设备名称"></el-input>
      </template>
    </avue-crud>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="dataFormSubmit">确 定</el-button>
        <el-button @click="cancleVisible">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { tableOption3 } from '/@/const/crud/maintenance/event.js'
import {
  queryDeviceOnlineInfo,
  getTreeType,
  getDeviceType,
  getDevtypeById
} from '/@/api/maintenance/event.js'
export default {
  name: 'DevForm',
  data() {
    return {
      // 是否显示弹出层
      visible: false,
      form: {},
      form2: {},
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableOption: tableOption3,
      tableData: [],
      // 遮罩层
      tableLoading: false,
      selectRow: -1,
      treeLocationData2: [],
      deviceTypeData: [],
      devTypeData: [],
      defaultProps3: {
        label: 'name',
        value: 'id'
      },
      defaultProps4: {
        label: 'bamAssetsTypeAlias',
        value: 'bamAssetsTypeCode'
      },
      defaultProps5: {
        label: 'bamAAssetsModelCn',
        value: 'bamAAssetsDeviceCode'
      },
      dataList: []
    }
  },
  created() {
    getTreeType().then((res) => {
      this.treeLocationData2 = res.data
    })
  },
  watch: {
    'form.modelType2': {
      handler(val, oldVal) {
        let _this = this
        if (val) {
          getDeviceType({ bamAssetsTypeMcode: val }).then((res) => {
            _this.deviceTypeData = res.data
          })
        }
        this.deviceTypeData = []
        this.devTypeData = []
        this.form.deviceType = ''
        this.form.devType2 = ''
      }
    },
    'form.deviceType': {
      handler(val, oldVal) {
        let _this = this
        if (val) {
          getDevtypeById({ bamAAssetsModelCode: val }).then((res) => {
            _this.devTypeData = res.data
          })
          return _this.tableData.forEach((item) => item.unmodel === val)
        }
        this.form.devType2 = ''
      }
    }
  },
  methods: {
    // init(isEdit, id) {
    //   this.visible = true
    //   this.getList(this.page, {}, id)
    // },
    dataFormSubmit() {
      let list = this.tableData[this.selectRow]
      this.$emit('getDeviceName', list)
      this.visible = false
      this.form.modelType2 = ''
      this.form.deviceType = ''
      this.form.devType2 = ''
      this.form.deviceName = ''
    },
    getList(page, params, id) {
      this.tableLoading = true
      queryDeviceOnlineInfo(
        Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize
          },
          params,
          this.searchForm
        )
      )
        .then((response) => {
          this.tableData = response.data.records
          this.page.total = response.data.total
          this.tableLoading = false
        })
        .catch(() => {
          this.tableLoading = false
        })
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange(current) {
      this.page.currentPage = current
    },
    searchChange(form, done) {
      this.selectRow = -1
      let obj = {}
      let obj1 = {}
      let obj2 = {}
      let obj3 = {}
      if (this.form.modelType2) {
        obj = { ...obj, modelType: this.form.modelType2 }
      }
      if (this.form.deviceType) {
        obj2 = { ...obj, unmodel: this.form.deviceType }
      }
      if (this.form.devType2) {
        obj1 = { ...obj, devType: this.form.devType2 }
      }
      if (this.form.deviceName) {
        obj3 = { ...obj, deviceName: this.form.deviceName }
      }
      form = Object.assign(form, obj, obj1, obj2, obj3)
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },
    refreshChange() {
      this.getList(this.page)
    },
    selectionChange(list) {
      this.dataList = list
    },
    cancleVisible() {
      this.form.modelType2 = ''
      this.form.deviceType = ''
      this.form.devType2 = ''
      this.form.deviceName = ''
      this.visible = false
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .avue-crud__menu {
  min-height: 0px;
  height: 0px;
}
// ::v-deep .el-dialog {
//   --el-dialog-margin-top: 5vh !important;
// }
</style>
